<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒/框模型</title>
		<style>
			div{
				/* div 空间 有宽没高  设置宽高*/
				width: 200px;
				height: 200px;
				border: 1px solid red;
				/* 1.什么是盒/框模型？
				   任何元素存在于盒模型中
				   2.盒模型包括什么？
				   外边距+边框+内边距+内容
				   3.外边距margin属性？
				   边框以外距离使用方法与border类似 【微调】
				   语法：margin： 属性值：为1个值，顺时针，代表方向：上 右 下 左
				                         为2个值，顺时针，代表方向：上 下 右 左
										 常用自适应居中   0 auto  / auto
										 为3个值，顺时针，代表方向：上 右 左 下
										 为4个值，顺时针，代表方向：上 右 下 左
					3.1外边距-方向属性
						margin-left: 数值px;     √  X方向微调
						margin-right: 数值px;
						margin-top: 数值px;      √  Y方向微调
						margin-bottom: 数值px;
					4.内边距padding属性,padding-方向与margin-方向用法一致
					      【精灵图:撑】
						  边框内容之间的距离 使用方法与margin类似 【精灵图:撑】
					语法:padding:  属性值：为1个值，顺时针，代表方向：上 右 下 左
				                         为2个值，顺时针，代表方向：上 下 右 左
										 为3个值，顺时针，代表方向：上 右 左 下
										 为4个值，顺时针，代表方向：上 右 下 左
				 */
				padding: 50px 100px;
				padding: 10px 20px 30px;
				margin: 100px;
				margin: 100px 200px;
				margin: 100px 200px 300px;
				margin: 100px 200px 300px 400px;
				margin-left: 150px;
				/* 元素自适应居中 */
				margin: 0 auto;
				
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>